@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <style>
        .el-radio {
            white-space: normal;
        }

        .el-checkbox__label {
            display: inline-grid;
            word-wrap: break-word;
            line-height: 20px;
            white-space: pre-line;
        }
    </style>
    <link href="/sitefiles/assets/css/watermark.css" rel="stylesheet" type="text/css" />
}
@await Html.PartialAsync("_PartialWatermark")
<template v-if="paper">
    <div class="text-center py-2 pb-3">
        <div>{{ paper.title }}</div>
    </div>
    <div v-for="(tm,tmIndex) in tmList">
        <el-card v-if="tm.parentId===0" class="mb-3 rounded-0" :ref="'tmid_'+tm.id" :id="'tmid_'+tm.id">
            <div slot="header">
                <div class="d-flex justify-content-start align-items-start fw-bold">
                    <div>{{ tm.tmIndex }}、</div>
                    <div>{{ tm.title }}（<span v-if="tm.tx==='Duoxuanti'">多选</span><span v-else-if="tm.tx==='Danxuanti'">单选</span><span v-else-if="tm.tx==='DanxuantiErwei' || tm.tx==='DuoxuantiErwei' || tm.tx==='DanxuantiSanwei' || tm.tx==='DuoxuantiSanwei'">多维</span><span v-else>简答</span>）</div>
                </div>
                <div class="mt-2" v-if="!tm.answerStatus">
                    <span class="text-warning fs-6"><i class="el-icon-info me-2"></i>请完善该项内容</span>
                </div>
            </div>
            <div class="list-group">
                <div v-if="tm.tx==='Danxuanti'">
                    <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                        <div>
                            <el-radio :label="option.key" v-model="tm.answer" v-on:change="answerChange(tm)" size="medium">
                                <span v-html="option.value"></span>
                            </el-radio>
                        </div>
                    </div>
                </div>
                <div v-else-if="tm.tx==='Duoxuanti'">
                    <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsRandom">
                        <div>
                            <div>
                                <el-checkbox size="medium" :true-label="option.key" false-label="" v-model="tm.optionsValues[optionsABC.indexOf(option.key)]" v-on:change="answerChange(tm)">
                                    <span v-html="option.value"></span>
                                </el-checkbox>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="tm.tx==='Jiandati'">
                    <el-input :key="tm.id" type="textarea" resize="none" v-model.trim="tm.answer" :autosize="{ minRows: 3}" maxlength="333" style="width:100%;"
                              show-word-limit v-on:change="answerChange(tm)"></el-input>
                </div>
                <div v-else-if="tm.tx==='DanxuantiErwei' || tm.tx==='DuoxuantiErwei'">
                    <table class="table table-bordered">
                        <tr v-for="(small,smallIndex) in tm.smallList">
                            <td class="p-3">
                                <span v-html="small.title"></span>
                            </td>
                            <td>
                                <template v-if="tm.tx==='DanxuantiErwei'">
                                    <div class="row">
                                        <div class="col col-12 col-md-6 col-lg-3 py-2" v-for="option in tm.options">
                                            <el-radio :label="option" v-model="small.answer" v-on:change="answerChange(small)" size="medium">
                                                <span v-html="option"></span>
                                            </el-radio>
                                        </div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="row">
                                        <div class="col col-12 col-md-6 col-lg-3 py-2" v-for="option in tm.options">
                                            <el-checkbox :true-label="option" false-label="" v-model="small.optionsValues[tm.options.indexOf(option)]" v-on:change="answerChange(small)" size="medium">
                                                <span v-html="option"></span>
                                            </el-checkbox>
                                        </div>
                                    </div>
                                </template>
                            </td>
                        </tr>
                    </table>
                </div>
                <div v-else-if="tm.tx==='DanxuantiSanwei'">
                    <table class="table table-bordered">
                        <tr v-for="(small,smallIndex) in tm.smallList">
                            <td class="p-3">
                                <span v-html="small.title"></span>
                            </td>
                            <td>
                                <div v-for="option in tm.options">
                                    <div class="py-2 fw-bolder">
                                        <span>{{ option }}</span>
                                    </div>
                                    <div class="row">
                                        <div class="col col-12 col-md-6 col-lg-3" v-for="optionSmall in small.options">
                                            <el-radio :label="option+'_'+optionSmall" v-model="small.optionsValues[tm.options.indexOf(option)]" v-on:change="answerChangeDuowei(small)" size="medium">
                                                <span v-html="optionSmall"></span>
                                            </el-radio>
                                        </div>
                                    </div>
                                    <hr />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <div v-else-if="tm.tx==='DuoxuantiSanwei'">
                    <table class="table table-bordered">
                        <tr v-for="(small,smallIndex) in tm.smallList">
                            <td class="p-3">
                                <span v-html="small.title"></span>
                            </td>
                            <td>
                                <div v-for="option in tm.options">
                                    <div class="py-2 fw-bolder">
                                        <span>{{ option }}</span>
                                    </div>
                                    <div class="row">
                                        <div class="col col-12 col-md-6 col-lg-3" v-for="optionSmall in small.options">
                                            <el-checkbox :true-label="option+'_'+optionSmall" false-label="" v-model="small.optionsValues[small.optionsAnswerValues.indexOf(option+'_'+optionSmall)]" v-on:change="answerChangeDuowei(small)" size="medium">
                                                <span v-html="optionSmall"></span>
                                            </el-checkbox>
                                        </div>
                                    </div>
                                    <hr />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </el-card>
    </div>
</template>
<div class="py-8"></div>
<div style="position:fixed;right:10%;top:80%;" class="text-center" v-if="paper && paper.tmTotal>0">
    <el-progress type="circle" :percentage="utils.formatPercentFloat(answerTotal,tmTotal)" status="success" width="50"></el-progress>
</div>
<div style="position:fixed;left:0;bottom:0;width:100%;" class="text-center mb-5 animate__animated animate__fadeInUp">
    <el-button-group class="rounded-0">
        <el-button class="rounded-0" type="primary" v-on:click="btnPaperSubmit" icon="el-icon-upload">提 交</el-button>
        <el-button class="rounded-0" v-on:click="utils.closeLayerSelf" icon="el-icon-close">退 出</el-button>
    </el-button-group>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/app/exam/examQuestionnairing.js" type="text/javascript"></script>
}